<script src="<?php echo base_url('theme/third_party/rating/lib/jquery.raty.min.js'); ?>" type="text/javascript"></script>
<script src="<?php echo base_url('theme/js/frontend/jquery.sticky.js'); ?>" type="text/javascript"></script>

<style>
  .content-container {
    background-color: #ececec;
  }
  .booth-container {
    margin: 40px 0 20px;
    line-height: 14px;
  }
  .booth-content {
    padding-top: 40px;
  }
  img.booth-banner {
    width: 958px;
    max-height: 376px;
  }
  .booth-avatar-block {
    float: left;
    position: relative;
    z-index: 10;
    margin-left: 20px;
    margin-top: -50px;
    background-color: #ECECEC;
    padding: 6px;
    width: 100px;
    height: 110px;
  }
  img.booth-avatar {
    width: 100px;
    height: 110px;
  }
  .booth-info {
    float: left;
    margin-left: 20px;
  }
  h1.booth-name {
    font-size: 20px;
    line-height: 20px;
  }
  table tr td:first-child {
    padding-right: 40px;
  }
  .banner_small {
    float: left;
    width: 471px;
    height: 180px;
    border: 1px solid #A8A8A8;
  }
  .banner_small:first-child {
    margin-right: 6px;
  }
  .items > li a { 
    display: block; 
    height: 155px; 
    position: relative;
  }
  .grid-product img { 
    position:absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
  #new-product, #promotion-product {
  	height: 155px;
  }
  footer {
    background-color: #4b4b4b;
    padding: 14px;
    color: #e6e6e6;
    position: relative;
    height: 138px;
  }
  footer a {
    color: #ffffff;  
  }
  .booth-footer-avatar {
  	float: left;
  	width: 60px;
  	height: 65px;
  }
  .social-block {
    position: absolute;
  	top: 14px;
  	right: 20px;
  }
  [class^="social-icon-"] {
    background-repeat: no-repeat;
    display: inline-block;
    height: 32px;
    vertical-align: text-top;
    width: 35px;
  }
  .social-icon-1 {
    background-image: url("../theme/images/icon/icon-flickr-hover.png");
  }
  .social-icon-2 {
    background-image: url("../theme/images/icon/icon-facebook-hover.png");
  }
  .social-icon-3 {
    background-image: url("../theme/images/icon/icon-googleplus-hover.png");
  }
  .social-icon-4 {
    background-image: url("../theme/images/icon/icon-twitter-hover.png");
  }
/* footer */
.f-link-info {
	position: absolute;
	bottom: 16px;
	right: 20px;
	font-weight: bold;
    text-align: center;
    font-size: 11px;
}
.f-link-info > a {
    color: #fff;
    display: block;
    padding: 8px 2px 6px;
    background-color: #5080D8;
    margin-right: 6px;
    float: left;
    height: 16px;
    width: 130px;
}
.f-link-info > a:hover {
    background-color: #0049BA;
}
#policy, 
#cooperation,
#introduction {
	display: none;
}
</style>
<div class="booth-container">
  <?php if ($booth['banner_large']): ?>
    <img class="booth-banner" src="<?php echo base_url('upload/booth/' . $booth['user_id'] . '/banner_large/' . $booth['banner_large']); ?>" />
  <?php else: ?>
    <img class="booth-banner" src="<?php echo base_url('theme/images/sample/booth/958x376.jpg'); ?>" />
  <?php endif; ?>
  
  <div class="row" style="background-color: #fff; padding-top: 6px; height: 90px;">
    <div class="booth-avatar-block">
      <?php if ($booth['avatar']): ?>
        <img class="booth-avatar" src="<?php echo base_url('upload/booth/' . $booth['user_id'] . '/avatar/' . $booth['avatar']); ?>" />
      <?php else: ?>
        <img class="booth-avatar" src="<?php echo base_url('theme/images/sample/booth/avatar.jpg'); ?>" />
      <?php endif; ?>
    </div>
    <div class="booth-info">
      <h1 class="booth-name"><?php echo $booth['name']; ?></h1>
      <?php echo $booth['address']; ?> <br />
      <table>
        <tbody><tr>
          <td><b>Điện thoại:</b> <?php echo $booth['tel']; ?></td>
          <td><b>Fax:</b> <?php echo $booth['fax']; ?></td>
        </tr><tr>
          <td><b>Email:</b> <a href="mailto:dsfg@sdf.com"><?php echo $booth['email']; ?></a></td>
        </tr><tr>
          <td><b>Website:</b> <?php echo $booth['website']; ?></td>
        </tr></tbody>
      </table>
    </div>
  </div>
  
  <style>
  .div-top {
    font-weight: bold;
    border-bottom: 20px solid #fff;
  }
  .div-top li {
    float:left;
    background-color: #ececec;
    height: 30px;
    padding: 10px 0 0 8px;
  }
  .div-top .div-top-empty {
    width: 686px;
    border-right: 6px solid #FFFFFF;
  }
  .div-top-youtube {
    width: 118px;
    position: relative;
    border-right: 6px solid #FFFFFF;
  }
  .div-top-youtube img {
    position: absolute;
    top: 4px;
    right: 4px;
  }
  .div-top-event {
    width: 118px;
  }
  </style>
  <ul class="row div-top">
    <li class="div-top-empty"></li>
    <li class="div-top-youtube">Youtube <img src="<?php echo base_url('theme/images/icon/youtube.gif'); ?>" /></li>
    <li class="div-top-event">Sự kiện</li>
  </ul>
  
  <div class="booth-content">
    <div class="row" style="padding: 0 3px;">
        <?php if ($booth['banner_small_1']): ?>
          <img class="banner_small" src="<?php echo base_url('upload/booth/'. $booth['user_id'] . '/banner_small_1/' . $booth['banner_small_1']); ?>" />
        <?php else: ?>
          <img class="banner_small" src="<?php echo base_url('theme/images/sample/booth/468x180.jpg'); ?>" />
        <?php endif; ?>
        <?php if ($booth['banner_small_2']): ?>
          <img class="banner_small" src="<?php echo base_url('upload/booth/' . $booth['user_id'] . '/banner_small_2/' . $booth['banner_small_2']); ?>" />
        <?php else: ?>
          <img class="banner_small" src="<?php echo base_url('theme/images/sample/booth/468x180.jpg'); ?>" />
        <?php endif; ?>
    </div>
    
    <?php if (!empty($special_products)): ?>
    <style>
    
    #mi-slider > ul > li {
        border: 1px solid #BDBDBD;
        height: 198px;
        padding: 5px;
        width: 172px;
    }
    #mi-slider > ul > li a {
        display: block;
        height: 155px;
        position: relative;
    }
    #mi-slider > ul > li img {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    #mi-slider nav a {
      font-weight: bold;
    }
     #mi-slider nav a:hover {
        color: #1C5AC4;
    }
    </style>
    <?php $i = 0; ?>
    <?php $j = 0; ?>
    <div class="row" style="background-color: #fff; margin-top: 14px; height: 269px; border-radius: 5px; border: 1px solid #A8A8A8;"> 
      <link href="<?php echo base_url('theme/css/frontend/catslider.css'); ?>" rel="stylesheet">
      <div id="mi-slider" class="mi-slider" style="height: 236px;">
        <ul>
        <?php foreach ($special_products as $special_product): ?>
          <?php if($special_product['product_type'] == 1): ?>
            <?php if ($i > 4) { break; } ?>
            <?php $i++; ?>
      	  <li>
		      <a rel="mainPopup[ajax]" href="<?php echo base_url("gian-hang/{$booth['slug']}/{$special_product['slug']}"); ?>" data-url="<?php echo "/gian-hang/{$booth['slug']}/{$special_product['slug']}"; ?>">
                <img src="<?php echo base_url("upload/booth/{$booth['user_id']}/products/avatar/{$special_product['id']}/{$special_product['avatar']}"); ?>" alt="<?php echo $special_product['name']; ?>">
              </a>
              <div class="caption">
                <h6><?php echo characterLimiter($special_product['name'], 20); ?></h6>
                <div style="color: #1C5AC4;"><?php echo $special_product['price'] ?> vnđ</div>
              </div>
            </li>
      	<?php endif; ?>
        <?php endforeach; ?>
        </ul>
        <ul>
        <?php foreach ($special_products as $special_product): ?>
          <?php if($special_product['product_type'] == 2): ?>
            <?php if ($j > 4) { break; } ?>
            <?php $j++; ?>
      	  <li>
      	    <a href="#"><img src="<?php echo base_url("upload/booth/{$booth['user_id']}/products/avatar/{$special_product['id']}/{$special_product['avatar']}"); ?>" alt="img01">
      	      <h4><?php echo characterLimiter($special_product['name'], 50); ?></h4>
      	      <p><?php echo $special_product['price'] ?> vnđ</p>
      	    </a>
      	  </li>
      	<?php endif; ?>
        <?php endforeach; ?>
        </ul>
        <nav style="top: 201px;">
          <?php if($i): ?>
      	  <a href="#">Sản phẩm mới</a>
      	<?php endif; ?>
      	<?php if($j): ?>
      	  <a href="#">Sản phẩm khuyến mãi</a>
      	<?php endif; ?>
        </nav>
      </div>
      <script src="<?php echo base_url('theme/js/frontend/modernizr.custom.63321.js') ?>"></script>
      <script src="<?php echo base_url('theme/js/frontend/jquery.catslider.js') ?>"></script>
      <script>
        $(function() {
          $('#mi-slider').catslider();
        });
      </script>
    </div>
    <?php endif; ?>
    
    <?php if (isset($tree_booth_product_categories) && $tree_booth_product_categories): ?> 
      <style>
        #list-categories {
          position: relative;
      	  z-index: 100;
      	  padding: 8px 0;
      	  margin: 0 3px; 
      	  background-color: #f4c790; 
      	  border: 1px solid #A8A8A8; 
      	  border-top: 1px solid #fff; 
      	  border-radius: 5px; 
      	  width: 950px;
        }
        .parent-categories {
          float: left;
          margin-left: 4px;
          padding: 4px 8px 0;
          font-weight: bold;
          position: relative;
        }
        .parent-categories:hover {
          background-color: #F8A324;
        }
        .parent-categories:hover .list-child-categories {
          background-color: #F8A324;
          display: block;
        }
        .list-child-categories {
          display: none;
          background-color: #FFFFFF;
          left: 0;
          margin: 0;
          position: absolute;
          top: 24px;
          width: 220px;
          padding: 4px;
          z-index: 200;
        }
      </style>
      <ul id="list-categories" class="row">
        <?php foreach($tree_booth_product_categories as $parent_category): ?>
          <?php if (isset($parent_category['id'])): ?>  
          <li class="parent-categories" data-category="<?php echo $parent_category['id']; ?>">
            <a href="javascript:void(0);"><?php echo $parent_category['name']; ?></a>
            <?php if (isset($parent_category['child'])): // children ?>          
              <ul class="list-child-categories">
                <?php foreach($parent_category['child'] as $child_category): ?>
                  <li class="child-categories" data-category="<?php echo $child_category['id']; ?>"><a href="javascript:void(0);"><?php echo $child_category['name']; ?></a></li>   
                <?php endforeach; ?>
              </ul>
            <?php endif; ?>
          </li> 
          <?php endif; ?>    
        <?php endforeach; ?>
      </ul>
    <?php endif; ?>
    
    <!-- Grid Product -->
    <?php if(!empty($booth_products)): ?>
      <ul class="thumbnails items grid-product">
        <?php foreach ($booth_products as $booth_product): ?>
            <li>
              <a rel="mainPopup[ajax]" href="<?php echo base_url("gian-hang/{$booth['slug']}/{$booth_product['slug']}"); ?>" data-url="<?php echo "/gian-hang/{$booth['slug']}/{$booth_product['slug']}"; ?>">
                <img src="<?php echo base_url("upload/booth/{$booth['user_id']}/products/avatar/{$booth_product['id']}/{$booth_product['avatar']}"); ?>">
              </a>
              <div class="caption">
                <div style="margin-top: 6px; border:1px dashed #C6C6C6"></div>
                <h6><?php echo characterLimiter($booth_product['name'], 28); ?></h6>
                <div style="color: #1C5AC4;"><?php echo getBoothCategories($booth['category_id']); ?></div>
              </div>
            </li>
        <?php endforeach; ?>
      </ul>
      <script type="text/javascript">
        $(document).ready(function(){ 
          // js.js
          mainPopup('booth');
        });
      </script> 
    <?php endif; ?>
    <!-- /Grid Product -->
    
    <div class="row" id="map-toggle" style="cursor: pointer;background: url(<?php echo base_url('theme/images/icon/map.gif'); ?>) no-repeat scroll 99% center; background-color: #e7e7e7;border: 1px solid #BDBDBD;height: 20px;padding: 13px 5px 8px; margin: 4px;border-radius: 4px;text-align: right;">
      <b style="margin-right: 20px;">google map</b>
    </div>
    
    <div id="map_canvas" style="display: none; width: 940px; height: 388px;border: 1px solid #BDBDBD; margin: 4px 0 10px" data-lat=<?php echo $booth['lat'] ?> data-lng=<?php echo $booth['lng'] ?>></div> 
    <script type="text/javascript">
      $(document).ready(function(){ 
        if ($(this).data("lat")) {
            lat = $(this).data("lat");
            lng = $(this).data("lng");
        } else {
            lat = 11;
            lng = 11;
        }

        var map = new google.maps.Map(document.getElementById("map_canvas"), {
            zoom: 14,
            center: new google.maps.LatLng(lat, lng),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map: map
        });

        $("#map-toggle").click(function() {
        	$("#map_canvas").toggle("slow");
         });
      });
    </script> 
    
    <footer class="row">
      <?php if ($booth['avatar']): ?>
        <img class="booth-footer-avatar" src="<?php echo base_url('upload/booth/' . $booth['user_id'] . '/avatar/' . $booth['avatar']); ?>" />
      <?php else: ?>
        <img class="booth-footer-avatar" src="<?php echo base_url('theme/images/sample/booth/avatar.jpg'); ?>" />
      <?php endif; ?>

      <div class="booth-info">
        <h1 class="booth-name"><?php echo $booth['name']; ?></h1>
        <?php echo $booth['address']; ?> <br />
        <table>
          <tbody><tr>
            <td><b>Điện thoại:</b> <?php echo $booth['tel']; ?></td>
            <td><b>Fax:</b> <?php echo $booth['fax']; ?></td>
          </tr><tr>
            <td><b>Email:</b> <a href="mailto:dsfg@sdf.com"><?php echo $booth['email']; ?></a></td>
          </tr><tr>
            <td><b>Website:</b> <a href="<?php echo $booth['website']; ?>" target="_blank"><?php echo $booth['website']; ?></a></td>
          </tr></tbody>
        </table>
      </div>
      <div style="border:1px dashed gray;position:absolute;width: 910px;top: 102px"></div>
      
      <div class="social-block">
        <div style="font-size: 16px;font-weight: bold; margin-left: 85px; margin-bottom:14px;">Chia se:</div>
        <a href="<?php echo $booth['social1']; ?>"><i class="social-icon-1"></i></a>
        <a href="<?php echo $booth['social2']; ?>"><i class="social-icon-2"></i></a>
        <a href="<?php echo $booth['social3']; ?>"><i class="social-icon-3"></i></a>
        <a href="<?php echo $booth['social4']; ?>"><i class="social-icon-4"></i></a>
      </div>
      <div class="f-link-info">
        <a href="javascript:void(0);" data-block="policy">Chính sách gian hàng</a>
        <a href="javascript:void(0);" data-block="cooperation">Hợp tác kinh doanh</a>
        <a href="javascript:void(0);" data-block="introduction">Giới thiệu</a>
      </div>
    </footer>
    
  </div> <!-- /booth-content -->
</div> <!-- /booth-container -->

<script type="text/javascript">
  $(document).ready(function() { 
 
    // load product khi chon category
    $('.parent-categories, .child-categories').click(function(){
      var category_id = $(this).data("category");
      var href = '<?php echo base_url('booth_product/ajax_get_products_by_category_id') . '/'; ?>';
      $.get(href + category_id, function(data) {
        if(data) {
          $(".grid-product").html(data); 
          // js.js
          mainPopup('booth');
        }
      });	
      return false;
    });

    $(window).load(function(){
      $("#list-categories").sticky({ topSpacing: 38 });
    });
    
  });
  </script> 